<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人资料--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../component/layui/css/layui.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form layui-row" lay-filter="userinfo" action="">
    <input type="hidden" name="id" id="id">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 25px;text-align: center;">
                    <div class="text-center layui-text">
                        <div class="user-info-head" id="userInfoHead">
                            <img src="" id="userAvatar" name="userAvatar" width="115px" height="115px" alt="">
                        </div>
                        <h2 style="padding-top: 20px;font-size: 20px;">就眠仪式</h2>
                    </div>
                </div>
                <div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
                    <span>陕西省，西安市</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-xs12">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="account" disabled class="layui-input layui-disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户角色</label>
                <div class="layui-input-block">
                    <input type="text" name="valid" value="超级管理员" disabled class="layui-input layui-disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-block">
                    <input type="text" value="" name="username" placeholder="请输入真实姓名" lay-verify="required"
                           class="layui-input realName">
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label" id="sex">性别</label>
                <div class="layui-input-block userSex">
                    <input type="radio" name="sex" value="1" title="男" checked="">
                    <input type="radio" name="sex" value="0" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="tel" value="" name="telephonenumber" placeholder="请输入手机号码" lay-verify="phone"
                           class="layui-input userPhone">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生年月</label>
                <div class="layui-input-block">
                    <input type="text" id="birthday" name="birthday" value="" placeholder="yyyy-MM-dd"
                           lay-verify="userBirthday"
                           class="layui-input userBirthday">
                </div>
            </div>
            <div class="layui-form">
                <div class="layui-form-item" id="area-picker">
                    <div class="layui-form-label">家庭地址</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <select name="province" id="province" style="width: 100px"
                                lay-filter="province">
                            <option> 省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <select name="city" id="city" style="width: 100px">
                            <option> 市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <select name="area" id="area" style="width: 100px">
                            <option> 区</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" value="" name="email" placeholder="请输入邮箱" lay-verify="email"
                           class="layui-input userEmail">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">自我评价</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea myself" name="selfassessment"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src="../../component/layui/layui.js"></script>
<script type="text/javascript" src="../../component/pear/pear.js"></script>
<script type="text/javascript" src="../../component/js/address.js"></script>
<!--<script type="text/javascript" src="js/jquery.cookie.js"></script>-->
<script>

    layui.config({
        base: '../../component/layui/mods/'
        , version: '1.0'
    });

    layui.use(['jquery', 'element', 'layer', 'upload', 'form',
        'laydate', 'address'], function () {
        var element = layui.element,
            layer = layui.layer,
            admin = layui.admin,
            upload = layui.upload,
            form = layui.form,
            $ = layui.jquery,
            laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#birthday'
        });
        demoText = $('#demoText');
        var user = JSON.parse(localStorage.getItem("user1"));
        user.birthday = layui.util.toDateString(user.birthday, "yyyy-MM-dd")
        //console.log(JSON.stringify(user));


//多级地址的选择


        form.on('select', function (data) {
            var t = data.elem;
            var dd = t.value;
            var n;
            var s;
            if (t.name == "province") {
                s = "c"
                n = $("#city");
                $("#city").empty();
                $("#area").empty();
            }  else if (t.name == "city") {
                s = "a"
                n = $("#area");
                $("#area").empty();
            }
            if(n)
            n.append("<option>请选择 </option>")

            $.ajax({
                url: "http://47.93.226.229/getPCA",
                //根据flag判断查询的方式（省市区）
                data: {flag: s, code: dd},
                dataType: 'json',
                type: 'get',
                success: function (d) {
                    if (d.length > 0) {
                        var str;
                        for (var p_id in d) {
                            str = "<option value=" + d[p_id].code + ">" + d[p_id].name + "</option>"
                            n.append(str)
                        }
                    }
                    form.render();
                }

            })

        })

        //初始化select脚本
        var province = $('#province');
        var city = $('#city');
        var area = $('#area');
        $.ajax({
            url: "http://47.93.226.229/getPCA",
            data: {flag: "p"},
            dataType: 'json',
            type: 'get',
            success: function (d) {
                if (d.length > 0) {
                    var str;
                    for (var p_id in d) {
                        str = "<option value=" + d[p_id].code + ">" + d[p_id].name + "</option>"
                        province.append(str)

                        if (user.province == d[p_id].code) {
                            $("#province option[value='" + d[p_id].code + "']").attr("selected", "selected");
                        }
                    }

                }
                form.render();
            }
        })
        $.ajax({
            url: "http://47.93.226.229/getPCA",
            //根据flag判断查询的方式（省市区）
            data: {flag: "c"},
            dataType: 'json',
            type: 'get',
            success: function (d) {
                if (d.length > 0) {
                    var str;
                    for (var p_id in d) {
                        str = "<option value=" + d[p_id].code + ">" + d[p_id].name + "</option>"
                        city.append(str)
                        if (user.city == d[p_id].code) {
                            $("#city option[value='" + d[p_id].code + "']").attr("selected", "selected");
                        }
                    }
                }
                form.render();
            }
        })
        $.ajax({
            url: "http://47.93.226.229/getPCA",
            //根据flag判断查询的方式（省市区）
            data: {flag: "s"},
            dataType: 'json',
            type: 'get',
            success: function (d) {
                if (d.length > 0) {
                    var str;
                    for (var p_id in d) {
                        str = "<option value=" + d[p_id].code + ">" + d[p_id].name + "</option>"
                        area.append(str);
                        if (user.area == d[p_id].code) {
                            $("#area option[value='" + d[p_id].code + "']").attr("selected", "selected");
                        }
                    }
                }
                form.render();
            }

        })


        //图片的显示
        $("#userAvatar").attr("src", "http://47.93.226.229/image/" + user.userAvatar);


        var uploadInst = upload.render({
            elem: '#userAvatar',
            url: 'http://47.93.226.229/uploadImage',//这里填写你的上传地址
            data: {"id": user.id},
            accept: 'images',
            method: 'post',
            acceptMime: 'image/*'
            , before: function (obj) {
                /*如果您不想用上面的URL 进行上传,也可以在这里,添加你的上传方式*/
                obj.preview(function (index, file, result) {
                    $('#userAvatar').attr('src', result);//图片链接（base64）
                });
            }, done: function (d) {
                if (d.code == 200) {//长传成功(具体返回code 看后台是怎么处理的)
                    return layer.msg('上传失败');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                } else {
                    user.userAvatar = d.res;
                    // console.log(JSON.stringify(user))
                    localStorage.setItem("user1", JSON.stringify(user));
                    // sessionStorage.setItem("userAvatar",JSON.stringify(res));
                    layer.msg('图片上传成功!');
                }
            }
            , error: function () {
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            }
        });
        //上传失败监听重试按钮的操作
        demoText.find('.demo-reload').on('click', function () {
            uploadInst.upload();
        });


        form.on('submit(changeUser)', function (data) {
            if (data.field.userAvatar == null) {
                data.field.userAvatar = user.userAvatar;
            }
            data.field.birthday = new Date(data.field.birthday);
            // let index=0;
            $.ajax({
                url: "http://47.93.226.229/updatemyself/" + user.id,
                data: data.field,
                type: "POST",
                success: function () {
                    // layer.close(loadindex);
                    layer.msg("修改成功");
                    localStorage.setItem("user1", JSON.stringify(data.field));
                    // layer.close(index);
                }
            });
            return false;
        });


        form.val("userinfo", user);

        form.render(); //刷新select选择框渲染
    });

</script>
</body>
</html>
